<template>
	<div class="login">


			<div class="logo">
			 <div class="img">
			    <img :src="logo" alt="" />
			  </div>
			  <div class="font">
			    <p class="header">全福元手持</p>
			  </div>
			</div>


			<div class="loginBg">
			  <form>
						<div class="userName">
								<div class="iconBorder"></div>
								<div class="user_name_info">用户名:</div>
						</div>
						<div class="border-box">
								<input type="text" autocomplete="off" placeholder="请填写账号" v-model="loginForm.userId" />
						</div>

						<div class="userName" style="margin-top: 15px;">
								<div class="iconBorder"></div>
								<div class="user_name_info">密码:</div>
						</div>

						<div class="border-box">
							 <input type="password" autocomplete="off" placeholder="请填写密码" v-model="loginForm.password" />
						</div>

					<!-- 	<div class="userName" style="margin-top: 15px;">
								<div class="iconBorder"></div>
								<div class="user_name_info">库区:</div>
						</div>


						<div class="border-box">
							 <input type="text" autocomplete="off" placeholder="请填写库区" v-model="loginForm.kuquid" />
						</div> -->
				</form>


				<div class="footerBtn">
				   <van-button round block type="info" @click="handleClick()">提交</van-button>
				 </div>
			</div>


			<!-- 选择门店弹窗 -->
			<van-popup v-model="showStoreIdPicker" round position="bottom" :style="{ height: '250px' }" >
					<div class="store-wrapper">
						<div class="store-title">
							请选择您要登录的库区
							<div class="overClick" @click="showStoreIdPicker = false">
								<van-icon name="cross" />
							</div>
						</div>
						<div class="store-block"  @click.stop>
							<template v-for="(item,index) in kuquList" >
									<van-cell :key="index"  :value="item.kqid" is-link @click="onStoreIdConfirm(item)" class="storeRow">
										<template #title>
											<span class="custom-title">{{item.kqname}}</span>
										</template>
									</van-cell>
							</template>
						</div>
					</div>
			</van-popup>




	</div>

</template>

<script>
import { getCookie, setStore, setCookie, delCookie } from "../utils/util";
export default {
  name: 'login',
  data () {
    return {
			showStoreIdPicker: false,
			logo: require('@/../static/img/logo.png'),
      loginForm :{
        // userId : localStorage.getItem('user'), //读取本地存储的用户名和密码,
        // password : localStorage.getItem('pswd'),
        // kuquid : localStorage.getItem('kqid'),

				userId :'', //读取本地存储的用户名和密码,
				password :'',
				kuquid : '',
        //
        user_lst: localStorage.getItem('user'), //读取本地存储的用户名和密码
        password_lst: localStorage.getItem('pswd'),
        kuquid_lst: localStorage.getItem('kqid'),
      },
			remember: true, //是否记录密码，
			kuquList:[],
    }
  },
  methods: {
		_getKuQulick(){
		 var _self = this;
		 var ldemodata = [{retval:0, errmsg:'返回数据集'},]
		 this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_login',
				'i':this.FNULLE([
					'opmode','qry_kqda',
				])
				}, '登录',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}

					console.log("登录")
					console.log(rtn_json_obj)
					_self.kuquList = rtn_json_obj
					// _self.editForm.cwno = rtn_json_obj[0].ret_mess
				}
		 });
		},
    goRouter_f2forgotpswd(){
			this.$router.push({ path: '/forgotpswd' })
    },
		onStoreIdConfirm(row){

			this.loginForm.kuquid = row.kqid
			setStore("system",row.yn_jjfj);
			var _self = this;
			var ls_user       = this.loginForm.userId;
			var ls_password   = this.loginForm.password;
			var ls_kqid       = this.loginForm.kuquid

			var rnd=Math.random(); rnd=Math.floor(rnd*10000);
			console.log(this.loginForm.kuquid)
			if(ls_user ==''||ls_user==null || ls_password == '' || ls_password==null){
				this.$toast.fail('请输入用户名和密码')
			  return
			}
			if(ls_kqid ==''||ls_kqid==null){
				this.$toast.fail('请输入库区ID')
			  return
			}

			//原型阶段用到的字段,及字段的demo值!!!
			var ldemodata = [{}]
			this.MYPOST({
				'method':'dologinajax',
				'rand':rnd,
			  'userc':ls_user,
			  'passw':ls_password,
			  'kqid':ls_kqid,
			  'ldtapk':'',
			  'ldtios':'' //原型阶段认为需要处理的参数!!!
			},'登录',false, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
			  if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail(ret_errmess)
			  }else{
			    var rtn_json_obj = null;
			    if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
			    }else{ rtn_json_obj = _self.arr2Obj(ret_oldresp.data.data); //非标准的dgate接口,返回的一个不兼容的处理
			    }
			    if(rtn_json_obj && rtn_json_obj.length > 0 && rtn_json_obj[0].timestamp && rtn_json_obj[0].timestamp > ''){ //调用插件,同步设备日期时间戳
			      try{
			        //如何将插件加载进行,或者在apk中访问一个httpclient来获取时间戳
			      }catch(err){};
			    }
			    _self.loginSuccDeal(rtn_json_obj,ls_user,ls_password,ls_kqid);
			  }
			});

		},
    handleClick : function() {
			this.showStoreIdPicker = true
    },
    /////////////////////////////双因素登录 END  /////////////////////////
    loginSuccDeal(userobjarr,ls_user,ls_password,ls_kqid){
      var _self = this
      _self.GWO(true).gUSER = userobjarr[0]; //记录一个新的用户登录信息, login中 _self.GWO(true)其他地方应该是 _self.GWO()
      console.log('---------登录成功返回的用户对象:'); console.log(_self.GWO().gUSER)
       localStorage.setItem('Authorization',JSON.stringify(userobjarr[0])); //登录成功写信息
      //
      try{ ls_password = _self.GWO(true).gUSER.password;  ls_kqid = _self.GWO(true).gUSER.kqid; }catch(epw){}
      // alert("您登录成功了"+_self.userToken )
      if(_self.remember){
        if(_self.user_lst != ls_user ){localStorage.setItem('user', ls_user); }
        if(_self.password_lst != ls_password){ localStorage.setItem('pswd', ls_password); } //记录用户名,密码,方便登录
        if(_self.kuquid_lst != ls_kqid){ localStorage.setItem('kqid', ls_kqid); } //记录用户名,密码,方便登录
        this.$toast('登录成功')
      }else{
        localStorage.setItem('user','');
        localStorage.setItem('pswd','');
        localStorage.setItem('kqid',''); //不记录密码,将之清空
      }
			this.$destroy() //清除缓存
      _self.$router.push({ path: '/main' });
    }
  },
  components:{

  },
  computed: {

  },
  mounted :function(){
    var _self = this; window.GWO().debug=this;
    //自动登录END
    if(_self.loginForm.user_lst > '' && _self.loginForm.password_lst > ''){
      _self.remember = true //历史有数,就认为是记录密码的方式
    }
		this._getKuQulick();
		// if(lt_ms > 60000 ||  lt_ms < -60000){}
  }
}

</script>
<style scoped lang="scss">
div.login {
  width:100%;
	height: 100%;
  background: #fff;
}



div.logo {
  width: 100%;
  padding-top:30px;
  text-align: center;
  div.img {
    margin: 0 auto;
    width:100%;
    height: 100%;
    img {
      width:60px;
      height: 60px;
    }
  }
  div.font {
    p {
			font-size:24px;
			color: #596BFF;
      font-weight: bold;
      line-height:80px;
    }
  }
}


.loginBg{
	width:80%;
	height:170px;
	margin-left: 10%;
	.userName{
		display: flex;
		align-items: center;
		.iconBorder{
			width: 4px;
			height: 19px;
			background: linear-gradient(146deg, #418EFF 0%, #EEF4FF 100%);
			border-radius: 4px;
		}
		.user_name_info{
			font-size: 16px;
			font-weight: bold;
			color: #222222;
			margin-left: 15px;
		}
	}

	.border-box {
		input{
			width:100%;
			height:38px;
			border: 1px solid transparent;
			border-radius: 16px;
			background-clip: padding-box, border-box;
			background-origin: padding-box, border-box;
			background-image: linear-gradient(to right, #FFF, #FFF), linear-gradient(90deg, rgba(159, 156, 252, 1),rgba(99, 168, 248, 1));
			margin-top: 15px;
			padding-left:10px;
			padding-right:10px;
			box-sizing: border-box;
			font-size: 12px;
		}
	}
}


.footerBtn{
	margin-top:30px;
}



div.store-wrapper{
	width: 100%;
	height: 100%;
	background-color: #fff;
	.store-title{
			width: 100%;
			height:45px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 16px 16px 0px 0px;
			font-size: 14px;
			color: #fff;
			background:#4D9FFF;
			position: relative;
			div.overClick{
				position: absolute;
				right:10px;
			}
	}
	.store-block{
		width: 100%;
		height:205px;
		background-color: #fff;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}


div.storeRow:nth-child(2n){
	background-color:#F0F7FF;
}

</style>

